<template>
  <div class="knowledgepoint_main">
    <div class="knowledgepoint_mainleft darkScorll">
      <div class="knowledgepoint_mainleftitem text-ellipsis" @click="openIndex = index"
        :class="openIndex == index ? 'active' : ''" v-for="(item, index) in knowledgePoint">{{ item.title }}</div>
    </div>
    <div class="knowledgepoint_mainright darkScorll">
      <div v-html="markdownConverted(item.content)" v-if="openIndex == index" v-for="(item, index) in knowledgePoint">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    knowledgePoint: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      openIndex: 0
    }
  },
  mounted() {

  },


  methods: {
    closeOpen() {
      this.$emit('closeOpen')
    },
    markdownConverted(content) {
      if (!content) return '';
      return marked.parse(content);
    },
  }
}
</script>
